
<template>
  <div id="detailWrap">
    <div class="head"><router-link :to="{name:'vuserManager'}">返回上一页</router-link></div>
    <div class="container">
      <div><span>电话号码      </span><span><input type="text" :disabled='userDetail.v_status === 3' v-model="userDetail.call_mobile"></span></div>
      <div><span>密码      </span><span v-if="isNew"><input type="text" v-model="userDetail.uid"></span></div>
      <div><span>预计大V ID      </span><span v-if="isNew">{{userDetail.uid}}</span></div>
      <div><span>昵称       </span><input type="text" :disabled='userDetail.v_status === 3' v-model="userDetail.nick_name">
        <span>身份证       </span><input type="text" :disabled='userDetail.v_status === 3' v-model="userDetail.id_card"></div>
      <div><span>头像       </span><span v-if="userDetail.head_image"><img :src="userDetail.head_image"/><el-button type="primary" icon="delete" @click="deleteUpload(-1)"></el-button></span>
        <input type="file" @change="fileChange('head_image')" ref='head_image' :disabled='userDetail.v_status === 3'></div>
      <hr>
      <span v-for="(item,index) in userDetail.vuser_certificate"><img :src="item.file_url" /><el-button type="primary" icon="delete" @click="deleteUpload(index)"></el-button></span>
      <input type="file" @change="fileChange('certification')" ref='certification' :disabled='userDetail.v_status === 3'></div>
      <textarea v-model="userDetail.v_introduction" name="v_introduction" :disabled='userDetail.v_status === 3'>
      </textarea>
      <hr>
      <div >
        <span>大V分类</span>
        <el-select  v-for="info in tags" v-model="info.name" :key="info.tag_id">
          <el-option
            v-for="item in tagOpitions"
            :key="item.tag_id"
            :label="item.name"
            :value="item.tag_id">
          </el-option>
        </el-select>
      </div>
      <div>
        <span>在线定价   </span><span><el-input-number v-model="userDetail.text_price" :min="1" :max="100"></el-input-number></span>
        <span>电话定价   </span><span><el-input-number v-model="userDetail.tel_price" :min="1" :max="100"></el-input-number></span>
      </div>
    <div class="footerBtn">
      <button v-if="userDetail.v_status === 1" @click="Audit(userDetail.uid)">审核</button>
      <button v-if="userDetail.v_status === 1" @click="reject(userDetail.uid)">拒绝通过</button>
      <button v-if="userDetail.v_status !==3" @click="sureModify">确认修改</button>
      <button><router-link :to="{name:'vuserManager'}">取消</router-link></button>
    </div>
  </div>
</template>

<script>
  import userService from './UserService.js'
  import Vue from 'vue'
  export default {
    data () {
      return {
        userDetail: {},
        fileList: [],
        tags: [],
        tagOpitions: [],
        isNew: true,
        user_certificate: []
      }
    },
    methods: {
      // 获取当前用户信息，冻结按钮需根据用户是否冻结显示隐藏
      getUserInfoById (uid) {
        var _this = this
        userService.getUserInfoById(uid).then(response => {
          if (response && response.data && response.data.hasOwnProperty('code') && response.data.code === 0) {
            _this.userDetail = response.data.data
            var certificate = _this.userDetail.vuser_certificate
            for (var key in certificate) {
              this.fileList.push({url: certificate[key]['file_url']})
            }
            _this.tags = _this.userDetail.vuser_good_tags
            if (!_this.userDetail.vuser_certificate) {
              _this.userDetail.vuser_certificate = []
            }
          } else {
            alert('获取大V申请明细失败 ' + response.data.msg)
          }
        }, response => {
          alert(response)
        })
      },
      // 通过用户审核
      Audit (uid) {
        userService.approvedVapply(uid).then(response => {
          if (response && response.data && response.data.hasOwnProperty('code') && response.data.code === 0) {
            this.getUserInfoById(uid)
          } else {
            alert(response.data.msg)
          }
        }, response => {
          alert(response)
        })
      },
      // 拒绝大v 用户申请
      reject (uid) {
        userService.rejectVapply(uid).then(response => {
          if (response && response.data && response.data.hasOwnProperty('code') && response.data.code === 0) {
            // 申请大V通过，刷新详情状态，按钮状态切换
            this.getUserInfoById(uid)
          } else {
            alert('驳回申请失败 ' + response.data.msg)
          }
        }, response => {
          alert(response)
        })
      },
      // 文件上传
      fileChange (type) {
        var param = {
          'type': 'cover'
        }
        var obj = this.$refs
        var file = obj[type]
        var fileName = file.files[0].name
        var index = fileName.lastIndexOf('.')
        var suffix = fileName.substring(index + 1)
        param['suffix'] = suffix
        param['file'] = file.files[0]
        file.value = ''
        var _this = this
        userService.uploadFile(param).then(response => {
          if (response && response.data && response.data.hasOwnProperty('code') && response.data.code === 0) {
            var data = response.data.data
            if (type === 'head_image') {
              this.userDetail.head_image = data.file_url
            } else if (type === 'certification') {
              var index = _this.userDetail.vuser_certificate.length
              var obj = {file_url: data.file_url}
              Vue.set(_this.userDetail.vuser_certificate, index, obj)
            }
          } else {
            alert('上传' + (type === 'head_image' ? '头像' : '证书') + '失败' + response.data.msg)
          }
        }, response => {
          alert(response)
        })
      },
      // 确认修改
      sureModify () {
        var _this = this
        if (this.isNew) {
          userService.createVuser(this.userDetail).then(response => {
            if (response && response.data && response.data.hasOwnProperty('code') && response.data.code === 0) {
              _this.userDetail = response.data.data
              var certificate = _this.userDetail.vuser_certificate
              for (var key in certificate) {
                this.fileList.push({url: certificate[key]['file_url']})
              }
              _this.tags = _this.userDetail.vuser_good_tags
            } else {
              alert('创建申请失败 ' + response.data.msg)
            }
          }, response => {
            alert(response)
          })
        }
      },
      // 删除头像或者证书,index=-1代表头像，>=0代表证书索引
      deleteUpload: function (index) {
        if (index === -1) {
          this.userDetail.head_image = ''
        } else {
          this.userDetail.vuser_certificate.splice(index, 1)
        }
      }
    },
    created: function () {
      var uid = this.$route.params['id']
      // uid为-1 新增
      if (parseFloat(uid) !== -1) {
        this.getUserInfoById(uid)
        this.isNew = false
      } else {
        this.isNew = true
        this.userDetail = {
          text_price: 10,
          tel_price: 10,
          v_introduction: '',
          nick_name: '',
          id_card: '',
          head_image: '',
          call_mobile: '',
          password: '',
          cpas: '',
          tags: [],
          vuser_certificate: []
        }
      }
      // 获取大V用户的good下拉框选项
      var _this = this
      userService.getVuserGoodTags().then(response => {
        if (response && response.data && response.data.hasOwnProperty('code') && response.data.code === 0) {
          _this.tagOpitions = response.data.data
        } else {
          alert('获取大V下拉选项失败' + response.data.msg)
        }
      }, response => {
        alert(response)
      })
    }
  }
</script>

<style scoped>
  .container{
    border: 1px solid #fff;
  }
</style>
